<template>
    <div style="height: 3000px;" class="box">
        
    </div>
    <img ref="target" alt="">
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
    const target = ref<HTMLImageElement | null>(null)
const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        //   isIntersecting为true时发送请求
          if(isIntersecting) {
        target.value!.src = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg' 
        stop()
        console.log(111);
        
          }
      },
    )
</script>

<style scoped>

</style>